<template>
  <!-- 头部 -->
  <div style="height: 60px; background-color: rgb(22, 100, 168)"></div>

  <!-- 主内容区域（整个 flex 容器包含菜单和右侧内容） -->
  <div style="display: flex">
    <!-- 左侧菜单 -->
    <div style="width: 200px; border-right: 1px solid #ddd; height: calc(100vh - 60px);">
      <el-menu router>
        <el-menu-item index="/management/Home">系统首页</el-menu-item>
        <el-menu-item index="/management/test">数据统计</el-menu-item>
        <el-menu-item index="/management/User">个人信息</el-menu-item>
        <el-menu-item index="/management/Exam">试卷生成</el-menu-item>
        <el-menu-item index="/management/Listener">语音识别</el-menu-item>
      </el-menu>
    </div>

    <!-- 右侧内容（子路由在此渲染） -->
    <div style="flex: 1; width: 0; background-color: #e1e4eb; padding: 10px;">
      <router-view></router-view>
    </div>

    <!-- 右侧主体开始部分 -->
     <!-- <div style="flex: 1;width: 0; background-color: #f5f7ff; padding: 10px">
        <RouterView @updateUser="updateUser"/>
     </div> -->
  </div>
</template>

<script>
import { RouterView } from 'vue-router';
import router from '@/router/index';

export default {
  name: 'management'
}
</script>
